$(function () {

  // 页面一加载就渲染local数据
  load()
  // 给input绑定按键enter事件
  $('.addText').on("keydown", function (event) {
    if (event.keyCode == 13) {
      if ($(this).val() == '') {
        alert('请输入内容')
      } else {
        // 阻止默认事件
        event.preventDefault();
        // 获取头部input输入的值(即input的value属性)
        var res = $(this).val()
        // 获取local中数据
        var setLocal = getData()
        // 向数据对象数组中加入输入的值
        setLocal.push({ title: res, done: false })
        // 保存数组至local中
        saveData(setLocal)
        // 渲染local数据
        load()
        // 设置input内容为空
        $(this).val('')
      }
    }
  })
  // 给a绑定单击事件on（给动态生成的元素绑定用on）（删除）
  $("ol,ul").on("click", "a", function () {
    // 获取a中的index属性
    var index = $(this).attr('index')
    // 获取本地数据
    var data = getData()
    // 删除对应的数据
    data.splice(index, 1)
    // 保存回local中
    saveData(data)
    // 重新渲染数据
    load()
  })

  // 给li中的input绑定单击事件
  $("ol,ul").on("click", "input", function () {
    // 获取input的checked属性的值
    var select = $(this).prop("checked")
    // console.log(select);
    // 获取之前绑定在a中的index
    var index = $(this).siblings("a").attr("index")
    // console.log(index);
    // 获取数据
    var data = getData()
    // 根据index改变对应数据中的done
    data[index].done = select
    // console.log(data);
    // 保存至local中
    saveData(data)
    // 重新渲染数据
    load()
  })

  // 给按钮绑定单击清空事件
  $(".btn").on("click", function () {
    localStorage.clear()
    load()
  })
  // 双击p元素修改
  $('.deal ol').on('dblclick', 'p',function () {
    var str = this.innerHTML // 获取p原来的内容
    // 禁止双击选中文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    // 改变p中的元素为input表单
    this.innerHTML = '<input type="text" />'
    // 获取input元素
    var input = this.children[0]
    input.value = str // 赋原先的值
    input.select() // 选中input的值
    // 绑定失去焦点事件
    input.onblur = function () {
      // 获取p元素的兄弟元素a中的index属性
      var index = $(this).parent().siblings("a").attr("index")
      // 获取本地数据
      var data = getData()
      // 修改对应的数据
      data[index].title = this.value
      // 保存回local中
      saveData(data)
      // 重新渲染数据
      load()
    }
    // 绑定enter事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur()
      }
    }
  })
  // 获取local中数据
  function getData() {
    var data = localStorage.getItem('todo')
    if (data) {
      return JSON.parse(data)
    } else {
      return []
    }
  }

  // 数据保存到local中
  function saveData(data) {
    localStorage.setItem('todo', JSON.stringify(data))
  }

  // 数据渲染到页面中
  function load() {
    // 获取local中数据
    var data = getData()
    // 清空ol,ul中原来的数据
    $(".todoList,.doneList").empty()
    // 声明两个数据用于计数
    var doingNum = 0
    var todoNum = 0
    // 遍历数据
    $.each(data, function (i, res) {
      // console.log(res);
      // 给ol添加子标签
      // 给a中增加一个属性作为每一项li的标识
      // 如果done属性为true，则渲染到ul中
      if (res.done) {
        $(".doneList").prepend(`
          <li class="todo-item">
          <input type="checkbox" checked>
          <p>${res.title}</p>
          <a href="javascript:;" index=${i}>-</a>
          </li>`)
        // ul每渲染一项li，则计数加1
        todoNum++
      } else {
        // 否则渲染到ol中
        $(".todoList").prepend(`
          <li class="todo-item">
          <input type="checkbox">
          <p>${res.title}</p>
          <a href="javascript:;" index=${i}>-</a>
          </li>`)
        doingNum++
      }
    })
    // 设置计数文本
    $(".doing").text(doingNum)
    $(".done").text(todoNum)
  }




})